<div class="project">
    <div class="project-menu">
        <div class="scroll-bar">
            <div class="menu-container">
                <g-menu-item 
                    class="menu-item"
                    :data="appList"
                    :selected="selected"
                    :key="appList.name"
                    @on-select="switchResourceRegType" >
                </g-menu-item>
            </div>
        </div>
    </div>
    <div class="project-content">
        <div class="top clearfix">
           <el-button @click="showDialog" size="small" type="primary">资源注册</el-button>
            <ul class="clearfix">
                <li>
                    <el-input v-model="searchInput"
                              class="search-input"
                              @change="handleSearchInputChange"
                              prefix-icon="iconfont icon-search" 
                              size="small" 
                              placeholder="请输入搜索标题">
                    </el-input>
                </li>
                <li>
                    <span class="iconfont icon-sort-desc"></span> 时间
                </li>
            </ul>
        </div>
        <div class="list">
            <el-table :data="tableData" 
                      style="width: 100%;">
                <el-table-column
                    prop="title"
                    label="标题"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    prop="nt"
                    label="备注"
                    min-width="200">
                    <template slot-scope="scope">
                        {{scope.row.nt?scope.row.nt:'<空>'}}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="selected == 'group'"
                    prop="groupName"
                    label="群组"
                    min-width="150">
                </el-table-column>
                <el-table-column
                    v-if="selected == 'department'"
                    prop="deptName"
                    label="部门"
                    min-width="150">
                </el-table-column>
                <el-table-column
                    prop="regDate"
                    label="提交时间"
                    min-width="180">
                    <template slot-scope="scope">
                        {{scope.row.regDate?scope.row.regDate:'<空>'}}
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    min-width="170"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <div>
                            <el-button @click="queryDetail(scope.row)" size="small" round>
                                详情
                            </el-button>
                            <el-button @click="deleteRow(scope.$index, tableData)" size="small" round>
                                删除
                            </el-button>
                        </div>                       
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                       style="margin-top:20px;text-align: center;" 
                       @current-change="handleLoadMore"
                       @prev-click="handleLoadMore"
                       @next-click="handleLoadMore"
                       :current-page="curPage"
                       :page-size="8"
                       background 
                       layout="prev, pager, next"
                       :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog
        :title="selectedName + '注册'"
        width="700px"
        :close-on-click-modal="false"
        @close="handleDialogClose"
        :close-on-press-escape="false"
        custom-class="resourceReg-dialog"
        :visible.sync="dialogVisible"
        >
        <div class="dialog-loading"
            v-loading="dialogLoading" 
            element-loading-background="rgba(0, 0, 0, 0.05)" >
        </div>
        <div class="dialog-body">
            <el-scrollbar style="height: 100%;">
                <el-form ref="form" label-width="80px" style="margin:0 20px 30px 0;">
                    <div class="form-item">
                        <label>注册信息<span class="require-item">*</span></label>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label-width="60px" label="标题">
                                    <el-input v-model="formData.title" size="small" value="" placeholder="请输入标题"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item v-if="selected=='group'" label-width="60px" label="群组">
                                    <el-select @focus="handleGroupFocus" v-model="formData.group" size="small" placeholder="请选择群组">
                                        <el-option v-for="item in groupOptions" 
                                                  :key="item.value"
                                                  :label="item.label" 
                                                  :value="item.value">
                                        </el-option>
                                    </el-select>   
                                </el-form-item>
                                <el-form-item v-if="selected=='department'" label-width="60px"  label="部门">
                                    <el-cascader
                                        size="small"
                                        :change-on-select="true"
                                        :options="departmentOptions"
                                        v-model="formData.department"
                                        @focus="handleDeptFocus">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="form-item">
                        <label>选择数据<span class="require-item">*</span></label>
                        <el-row>
                            <!-- <el-button size="mini" type="primary">个人数据</el-button>                            -->
                            <el-upload
                                style="display:inline-block"
                                class="upload-spatial-data"
                                ref="spatialDataUpload"
                                action=""
                                accept=".zip,.xls,.xlsx,.json,.csv,.kml,.kmz,.gpx"
                                :on-preview="handleSpatialDataPreview"
                                :on-remove="handleSpatialDataRemove"
                                :on-change="handleSpatialDataChange"
                                :file-list="spatialDataFileList"
                                :show-file-list="false"
                                :auto-upload="false">
                                <el-button slot="trigger" type="primary" size="small">上传数据</el-button>
                            </el-upload>
                            <span class="select-data-tip">
                                支持的文件格式有：CSV、Excel、SHP(ZIP)、GeoJson、KML/KMZ、GPX.
                            </span>
                        </el-row>
                        <!-- <div class="selectedPersonData selectedData">
                            <span class="title">已选个人数据：</span>
                            <el-collapse v-model="activeNames" @change="handleCollapseChange">
                                <el-collapse-item name="1">
                                    <template slot="title">
                                        <span class="el-icon-document"></span>
                                        <span>aaa</span>
                                        <span @click.stop="handleSelectedDataClose" class="iconfont icon-close"></span>
                                    </template>
                                </el-collapse-item>
                            </el-collapse>
                        </div> -->
                        <div v-if="selectedUploadDataList.length>0" class="selectedUploadData selectedData">
                            <span class="title">已选上传数据：</span>
                            <el-collapse v-model="activeNames2" @change="handleCollapseChange">
                                <el-collapse-item v-for="item in selectedUploadDataList" :key="item.id" :title="item.name" name="1">
                                    <template slot="title">
                                        <span class="el-icon-document"></span> 
                                        <span>{{item.name}}</span>
                                        <span @click.stop="handleSelectedDataClose(item)" class="iconfont icon-close"></span>
                                    </template>
                                    <div>
                                        <el-row style="padding-left:0;">
                                            <el-col :span="7">                   
                                                <el-form-item label-width="40px" label="分类">
                                                    <span class="require-item require-item2">*</span>
                                                    <el-select v-model="item.metaData.resClsId" size="mini" placeholder="分类">
                                                        <el-option v-for="resClsItem in item.resClsList" 
                                                                   :key="resClsItem.value"
                                                                   :label="resClsItem.label" 
                                                                   :value="resClsItem.value">
                                                        </el-option>
                                                    </el-select>   
                                                </el-form-item>    
                                            </el-col>
                                            <el-col :span="7">
                                                <el-form-item label-width="60px" label="坐标系">
                                                    <span class="require-item require-item2">*</span>
                                                    <el-select v-model="item.metaData.coordinate" size="mini" placeholder="坐标系">
                                                        <el-option label="WGS84" value="WGS84"></el-option>
                                                        <el-option label="GCJ02" value="GCJ02"></el-option>
                                                        <el-option label="CGCS2000" value="CGCS2000"></el-option>
                                                        <el-option label="BD09" value="BD09"></el-option>
                                                    </el-select>
                                                </el-form-item>  
                                            </el-col>
                                            <el-col :span="7">     
                                                <el-form-item label-width="60px" label="权限">
                                                    <span class="require-item require-item2">*</span>
                                                    <el-select v-model="item.metaData.apply" size="mini" placeholder="权限">
                                                        <el-option label="可申请" value="0"></el-option>
                                                        <el-option label="不可申请" value="1"></el-option>
                                                    </el-select>  
                                                </el-form-item>  
                                            </el-col>
                                        </el-row>
                                        <el-row class="tag-list">
                                           <span class="tag-span">标签</span> 
                                           <el-tag
                                                size="small" 
                                                :key="tagItem"
                                                v-for="tagItem in item.metaData.tag.list"
                                                closable
                                                :disable-transitions="false"
                                                @close="handleClose(item.metaData.tag, tagItem)">
                                                {{tagItem}}
                                            </el-tag>
                                            <el-input
                                                class="input-new-tag"
                                                v-if="item.metaData.tag.inputVisible"
                                                v-model="item.metaData.tag.inputValue"
                                                :ref="item.metaData.tag.saveTagInput"
                                                size="mini"
                                                @keyup.enter.native="handleInputConfirm(item.metaData.tag)"
                                                @blur="handleInputConfirm(item.metaData.tag)">
                                            </el-input>
                                            <el-button v-else class="button-new-tag" 
                                                        size="mini" 
                                                        @click="showInput(item.metaData.tag)">
                                                + New Tag
                                            </el-button>

                                        </el-row>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                    <div class="form-item">
                        <label>备注</label>
                        <el-input type="textarea" v-model="formData.comment"></el-input>
                    </div>
                    <div class="form-item">
                        <label>审批材料<span class="require-item">*</span></label>
                        <el-upload
                            style="margin-left:10px;"
                            class="approval-upload"
                            ref="approvalUpload"
                            action=""
                            :on-preview="handleApprovalPreview"
                            :on-remove="handleApprovalRemove"
                            :on-change="handleApprovalChange"
                            :file-list="approvalFileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>
                    </div>
                </el-form>       
            </el-scrollbar>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" @click="handleDialogSubmit" type="primary">提 交</el-button>
        </span>
    </el-dialog>

    <el-dialog
        :title="selectedName + '注册'"
        width="700px"
        :close-on-click-modal="false"
        @close="handleDetailDialogClose"
        :close-on-press-escape="false"
        custom-class="resourceReg-dialog"
        :visible.sync="resRegDetailDialogVisible"
        >
        <div class="dialog-body">
            <el-scrollbar style="height: 100%;">
                <el-form ref="form" label-width="80px" style="margin:0 20px 30px 0;">
                    <div class="form-item">
                        <label>注册信息</label>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label-width="40px" label="标题">
                                    <el-input :disabled="true" v-model="resRegDetail.registOrder.title" size="small" value="" placeholder="请输入标题"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item v-if="selected=='group'" label-width="60px" label="群组">
                                    <el-input :disabled="true" v-model="resRegDetail.registOrder.groupName" size="small" value="" placeholder="">
                                    </el-input>
                                </el-form-item>
                                <el-form-item v-if="selected=='department'" label-width="60px" label="部门">
                                    <el-input :disabled="true" v-model="resRegDetail.registOrder.deptName" size="small" value="" placeholder="">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="form-item">
                        <label>选择数据</label>
                        <!-- <el-row>   
                        </el-row> -->
                        <div class="selectedUploadData selectedData">
                            <span class="title">已选上传数据：</span>
                            <el-collapse v-model="activeNames2" @change="handleCollapseChange">
                                <el-collapse-item v-for="resFormItem in resRegDetail.resFrom1" :key="resFormItem.id" :title="resFormItem.name" name="1">
                                    <template slot="title">
                                        <span class="el-icon-document"></span> 
                                        <span>{{resFormItem.name}}</span>
                                        <span v-if="resFormItem.resStatus==1" title="已通过" 
                                            class="iconfont icon-tongguo res-status"></span>
                                        <span v-else-if="resFormItem.resStatus==2" title="未通过" 
                                            class="iconfont icon-jujue res-status"></span>
                                        <span v-else class="iconfont icon-warn res-status" title="待审核"></span>
                                        <!-- <span @click.stop="handleSelectedDataClose(resFormItem)" class="iconfont icon-close"></span> -->
                                    </template>
                                    <div>
                                        <el-row style="padding-left:0;">
                                            <el-col :span="7">
                                                <el-form-item label-width="40px" label="分类">
                                                    <el-input :disabled="true" v-model="resFormItem.resClsName" size="small" value="" placeholder="">
                                                    </el-input>
                                                </el-form-item>    
                                            </el-col>
                                            <el-col :span="7">
                                                <el-form-item label-width="60px" label="坐标系">
                                                    <el-input :disabled="true" v-model="resFormItem.coordinate" size="small" value="" placeholder="">
                                                    </el-input>
                                                </el-form-item>  
                                            </el-col>
                                            <el-col :span="7">
                                                <el-form-item label-width="60px" label="权限">
                                                    <el-input :disabled="true" v-model="resFormItem.applyName" size="small" value="" placeholder="">
                                                    </el-input>
                                                </el-form-item> 
                                            </el-col>
                                        </el-row>
                                        <el-row class="tag-list">
                                           <span class="tag-span">标签</span>
                                           <el-tag v-if="resFormItem.label" v-for="tag in resFormItem.label.split(',')" :key="tag.id" size="small">
                                                {{tag}}
                                           </el-tag>
                                        </el-row>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                    <div class="form-item">
                        <label>备注</label>
                        <el-input :disabled="true" type="textarea" v-model="resRegDetail.registOrder.nt"></el-input>
                    </div>
                    <div class="form-item">
                        <label>审批材料</label>
                        <ul style="font-size:12px;line-height: 16px;">
                            <li v-for="item in resRegDetail.attachFile" :key="item.id">
                                {{item.fileName + item.fileExt}}
                            </li>
                        </ul>
                    </div>
                </el-form>       
            </el-scrollbar>
        </div>
    </el-dialog>
</div>